<template>
  <VTable ref="tableRef" v-bind="tableOptins">
    <template #form="{ form }">
      <VGroup>
        <el-select class="selectClass !w-[100px]" v-model="form.timeRange.type">
          <el-option
            v-for="item in timeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-date-picker
          v-model="form.timeRange.value"
          type="month"
          value-format="YYYY-MM-DD"
          placeholder="请选择月份"
        />
      </VGroup>
      <!-- <el-input v-model="form.task_no" placeholder="任务编号" clearable class="w-50" /> -->
      <VGroup>
        <el-select class="selectClass !w-[100px]" v-model="form.orderRange.type">
          <el-option
            v-for="item in orderOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <multi-input
          clearable
          v-model="form.orderRange.value"
          class="w-50"
          placeholder="请输入"
        ></multi-input>
      </VGroup>
      <VGroup>
        <el-select class="selectClass !w-[130px]" v-model="form.personnelRange.type">
          <el-option
            v-for="item in userOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <select-personnel
          v-model="form.personnelRange.value"
          :multiple="true"
          placeholder="请选择"
        ></select-personnel>
      </VGroup>
      <!-- <el-select v-model="form.mark_tag" collapse-tags placeholder="评分状态" clearable>
        <el-option
          v-for="item in options['assignment.ImagesAssignment']?.[0].markTagText"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select> -->
      <el-select
        class="!w-[120px]"
        v-model="form.task_priority"
        collapse-tags
        placeholder="任务等级"
        clearable
      >
        <el-option
          v-for="item in options['assignment.ImagesAssignment']?.[0].taskPriorityText"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select
        class="!w-[120px]"
        v-model="form.task_type"
        collapse-tags
        placeholder="任务类型"
        clearable
      >
        <el-option
          v-for="item in options['assignment.ImagesAssignment']?.[0].taskTypeText"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select v-model="form.pid" class="!w-[160px]" placeholder="是否子任务" clearable>
        <el-option
          v-for="item in subTaskOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select
        v-model="form.is_exceed_task"
        class="!w-[160px]"
        placeholder="是否超额任务"
        clearable
      >
        <el-option
          v-for="item in excessTaskOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </template>
    <template #toolbar_btns>
      <VButton
        auth="/goods/statement/design-performance/configuration"
        type="primary"
        @click="handleModal('configuration')"
        >绩效模式配置</VButton
      >
      <VButton
        auth="/goods/statement/design-performance/export"
        class="ml-auto"
        @click="handleExport"
        >导出</VButton
      >
      <div class="w-full mt-2">
        <el-tabs v-model="activeDepartment" type="card" @tab-change="handleChangeMode">
          <el-tab-pane
            :label="item.label"
            :name="item.name"
            v-for="(item, index) in department_list"
            :key="index"
          ></el-tab-pane>
        </el-tabs>
      </div>
    </template>
  </VTable>
  <ComModal ref="ComModalRef" :options="options"></ComModal>
  <VLog ref="logRef" class="dialogPublic" :api="getScoreLog" options="taskId"></VLog>
  <LabelModal ref="labelModalRef" :options="options" @query="queryForm"></LabelModal>
  <DerivedCenter ref="DerivedCenterRef"></DerivedCenter>
  <addTaskConption ref="refAddTask" />
  <checkImage ref="refCheckImage" />
  <editPerformance ref="editPerformanceRef"></editPerformance>
  <addRoutineTask ref="addRoutineTaskRef" />
</template>
<script setup name="StatementInventory-balance" lang="jsx">
import { nextTick, ref, reactive, toRefs } from "vue";
import { queryScoreList, getScoreLog } from "../../api/index";
import { getOptions } from "@/api/index";
import VLog from "@/components/VLog";
import ComModal from "../../components/ComModal.vue";
import LabelModal from "../../components/LabelModal.vue";
import { getLastDayNumber } from "@/utils/index.js";
import DerivedCenter from "@/components/DerivedCenter";
import addTaskConption from "@/views/task/picture/components/addTask.vue";
import checkImage from "@/views/task/picture/components/checkImage.vue";
import editPerformance from "@/views/task/picture/components/editPerformance.vue";
import addRoutineTask from "@/views/task/picture/components/addRoutineTask.vue";
import { ElMessage } from "element-plus";

import {
  subTaskOptions,
  timeOptions,
  departmentList,
  userOptions,
  orderOptions,
  excessTaskOptions,
} from "../../data.js";

const data = reactive({
  options: [],
  activeDepartment: "",
  isRefreshTable: true,
  form: {},
  department_list: [],
});
const { options, isRefreshTable, activeDepartment, form, department_list } = toRefs(data);

const tableRef = ref();
const tableOptins = reactive({
  rowConfig: { height: 52 },
  formConfig: {
    data: {
      timeRange: {
        type: "performance_month",
        value: getLastDayNumber(),
        range: false,
      },
      orderRange: { type: "task_no", value: [], range: false },
      personnelRange: { type: "designer_user", value: [], range: false },
    },
  },
  columns: [],
  proxyConfig: {
    seq: true,
    props: {
      result: "data",
      total: "total",
    },
    autoLoad: false,
    ajax: {
      query: async ({ page, form }) => {
        if (!activeDepartment.value) {
          ElMessage.error("暂无权限，请申请");
          return;
        }
        const res = await queryScoreList({
          ...form,
          ...page,
          mode: activeDepartment.value,
        });
        return new Promise(function (resolve) {
          resolve({
            data: res.data,
            total: res.total,
          });
        });
      },
    },
  },
});

const initColumn = (activeDepartment) => {
  if (activeDepartment == 1) {
    return [
      {
        field: "performance_month",
        title: "绩效月份",
        width: 120,
      },
      {
        field: "task_no",
        title: "任务编号",
        width: 180,
        slots: {
          default: ({ row }) => {
            return (
              <div class="flex">
                <vText
                  type="button"
                  value={row.task_no}
                  copy={true}
                  onClick={() => handleTask(row)}
                ></vText>
                {row.pid ? (
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content={row.belongs_task?.task_no}
                    placement="top"
                  >
                    <div class="bg-[#E50113] text-[#fff] w-5 h-5 rounded-full text-center">
                      子
                    </div>
                  </el-tooltip>
                ) : (
                  ""
                )}
                {row.images_task_type == 2 ? (
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content={row.belongs_task?.task_no}
                    placement="top"
                  >
                    <div class="bg-[#e6a23c] text-[#fff] w-5 h-5 rounded-full text-center">
                      非
                    </div>
                  </el-tooltip>
                ) : (
                  ""
                )}
              </div>
            );
          },
        },
      },
      {
        title: "任务类型",
        width: 140,
        slots: {
          default: ({ row }) => {
            const task_type_text = row.task_type_text.length
              ? row.task_type_text.join("、")
              : "";
            return [
              <div>
                <div>
                  {row.task_priority_text && (
                    <span
                      class={`bgColor${row.task_priority_text}`}
                      style={"text-align:center;height: 20px;padding: 0 6px"}
                    >
                      {row.task_priority_text}
                    </span>
                  )}
                </div>
                <div class="text-[#333333]">
                  <vText value={task_type_text}></vText>
                </div>
              </div>,
            ];
          },
        },
      },
      {
        field: "sku",
        title: "SKU",
        width: 120,
        slots: {
          default: ({ row }) => {
            const skus = row.images_assignment_sku
              .map((i) => {
                if (i.sku) {
                  return i.sku;
                }
              })
              .join("、");
            return (
              <div>
                <vText value={skus}></vText>
              </div>
            );
          },
        },
      },
      {
        field: "designer_user_text",
        title: "图片处理人员",
        width: 120,
      },
      {
        field: "edit_user_text",
        title: "编辑人员",
        width: 120,
      },
      {
        field: "photography_user_text",
        title: "摄影人员",
        width: 120,
      },
      {
        field: "render_user_text",
        title: "渲染人员",
        width: 120,
      },
      {
        field: "assistance_user_text",
        title: "协助人员",
        width: 120,
      },
      {
        field: "label",
        title: "标签查看",
        width: 120,
        slots: {
          default: ({ row }) => {
            return (
              <el-button type="primary" link onClick={() => handleLabel(row)}>
                标签查看
              </el-button>
            );
          },
        },
      },
      {
        field: "completion_score",
        title: "完成情况得分",
        width: 120,
      },
      {
        field: "completion_quality_score",
        title: "完成质量得分",
        width: 120,
      },
      {
        field: "is_exceed_task_text",
        title: "是否超额任务",
        width: 120,
      },
      {
        title: "操作",
        width: "180",
        fixed: "right",
        slots: {
          default: ({ row }) => {
            return (
              <div class="table-option">
                <div>
                  <el-button type="primary" link onClick={() => handleScore(row)}>
                    评分
                  </el-button>
                  <el-button type="primary" link onClick={() => handleLog(row.id)}>
                    日志
                  </el-button>
                  <VButton
                    auth="/goods/task/picture/edit-performance"
                    type="primary"
                    link
                    onClick={() => handlePerformance(row.id)}
                  >
                    绩效编辑
                  </VButton>
                </div>
              </div>
            );
          },
        },
      },
    ];
  } else if (activeDepartment == 2 || activeDepartment == 4) {
    return [
      {
        field: "performance_month",
        title: "绩效月份",
        width: 120,
      },
      {
        field: "task_no",
        title: "任务编号",
        width: 180,
        slots: {
          default: ({ row }) => {
            return (
              <div class="flex">
                <vText
                  type="button"
                  value={row.task_no}
                  copy={true}
                  onClick={() => handleTask(row)}
                ></vText>
                {row.pid ? (
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content={row.belongs_task?.task_no}
                    placement="top"
                  >
                    <div class="bg-[#E50113] text-[#fff] w-5 h-5 rounded-full text-center">
                      子
                    </div>
                  </el-tooltip>
                ) : (
                  ""
                )}
                {row.images_task_type == 2 ? (
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content={row.belongs_task?.task_no}
                    placement="top"
                  >
                    <div class="bg-[#e6a23c] text-[#fff] w-5 h-5 rounded-full text-center">
                      非
                    </div>
                  </el-tooltip>
                ) : (
                  ""
                )}
              </div>
            );
          },
        },
      },
      {
        title: "任务类型",
        width: 140,
        slots: {
          default: ({ row }) => {
            const task_type_text = row.task_type_text.length
              ? row.task_type_text.join("、")
              : "";
            return [
              <div>
                <div>
                  {row.task_priority_text && (
                    <span
                      class={`bgColor${row.task_priority_text}`}
                      style={"text-align:center;height: 20px;padding: 0 6px"}
                    >
                      {row.task_priority_text}
                    </span>
                  )}
                </div>
                <div class="text-[#333333]">
                  <vText value={task_type_text}></vText>
                </div>
              </div>,
            ];
          },
        },
      },
      {
        field: "sku",
        title: "SKU",
        width: 120,
        slots: {
          default: ({ row }) => {
            const skus = row.images_assignment_sku
              .map((i) => {
                if (i.sku) {
                  return i.sku;
                }
              })
              .join("、");
            return (
              <div>
                <vText value={skus}></vText>
              </div>
            );
          },
        },
      },
      {
        field: "designer_user_text",
        title: "图片处理人员",
        width: 120,
      },
      {
        field: "edit_user_text",
        title: "编辑人员",
        width: 120,
      },
      {
        field: "photography_user_text",
        title: "摄影人员",
        width: 120,
      },
      {
        field: "render_user_text",
        title: "渲染人员",
        width: 120,
      },
      {
        field: "assistance_user_text",
        title: "协助人员",
        width: 120,
      },
      {
        field: "label",
        title: "标签查看",
        width: 120,
        slots: {
          default: ({ row }) => {
            return (
              <el-button type="primary" link onClick={() => handleLabel(row)}>
                标签查看
              </el-button>
            );
          },
        },
      },
      {
        field: "completion_score",
        title: "完成情况得分",
        width: 120,
      },
      {
        field: "completion_quality_score",
        title: "完成质量得分",
        width: 120,
      },
      {
        field: "is_exceed_task_text",
        title: "是否超额任务",
        width: 120,
      },
      {
        title: "操作",
        width: "180",
        fixed: "right",
        slots: {
          default: ({ row }) => {
            return (
              <div class="table-option">
                <div>
                  <el-button type="primary" link onClick={() => handleScore(row)}>
                    评分
                  </el-button>
                  <el-button type="primary" link onClick={() => handleLog(row.id)}>
                    日志
                  </el-button>
                  <VButton
                    auth="/goods/task/picture/edit-performance"
                    type="primary"
                    link
                    onClick={() => handlePerformance(row.id)}
                  >
                    绩效编辑
                  </VButton>
                </div>
              </div>
            );
          },
        },
      },
    ];
  } else if (activeDepartment == 3) {
    return [
      {
        field: "performance_month",
        title: "绩效月份",
        width: 120,
      },
      {
        field: "task_no",
        title: "任务编号",
        width: 180,
        slots: {
          default: ({ row }) => {
            return (
              <div class="flex">
                <vText
                  type="button"
                  value={row.task_no}
                  copy={true}
                  onClick={() => handleTask(row)}
                ></vText>
                {row.pid ? (
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content={row.belongs_task?.task_no}
                    placement="top"
                  >
                    <div class="bg-[#E50113] text-[#fff] w-5 h-5 rounded-full text-center">
                      子
                    </div>
                  </el-tooltip>
                ) : (
                  ""
                )}
                {row.images_task_type == 2 ? (
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content={row.belongs_task?.task_no}
                    placement="top"
                  >
                    <div class="bg-[#e6a23c] text-[#fff] w-5 h-5 rounded-full text-center">
                      非
                    </div>
                  </el-tooltip>
                ) : (
                  ""
                )}
              </div>
            );
          },
        },
      },
      {
        title: "任务类型",
        width: 140,
        slots: {
          default: ({ row }) => {
            const task_type_text = row.task_type_text.length
              ? row.task_type_text.join("、")
              : "";
            return [
              <div>
                <div>
                  {row.task_priority_text && (
                    <span
                      class={`bgColor${row.task_priority_text}`}
                      style={"text-align:center;height: 20px;padding: 0 6px"}
                    >
                      {row.task_priority_text}
                    </span>
                  )}
                </div>
                <div class="text-[#333333]">
                  <vText value={task_type_text}></vText>
                </div>
              </div>,
            ];
          },
        },
      },
      {
        field: "sku",
        title: "SKU",
        width: 120,
        slots: {
          default: ({ row }) => {
            const skus = row.images_assignment_sku
              .map((i) => {
                if (i.sku) {
                  return i.sku;
                }
              })
              .join("、");
            return (
              <div>
                <vText value={skus}></vText>
              </div>
            );
          },
        },
      },
      {
        field: "designer_user_text",
        title: "图片处理人员",
        width: 120,
      },
      {
        field: "edit_user_text",
        title: "编辑人员",
        width: 120,
      },
      {
        field: "photography_user_text",
        title: "摄影人员",
        width: 120,
      },
      {
        field: "render_user_text",
        title: "渲染人员",
        width: 120,
      },
      {
        field: "assistance_user_text",
        title: "协助人员",
        width: 120,
      },
      {
        field: "label",
        title: "标签查看",
        width: 120,
        slots: {
          default: ({ row }) => {
            return (
              <el-button type="primary" link onClick={() => handleLabel(row, 3)}>
                标签查看
              </el-button>
            );
          },
        },
      },
      {
        field: "completion_quality_score",
        title: "完成质量得分",
        width: 120,
      },
      {
        field: "converted_quantity",
        title: "目标套数",
        width: 120,
      },
      {
        field: "incentive_number",
        title: "激励套数",
        width: 120,
      },
      {
        field: "task_quality_text",
        title: "任务质量",
        width: 120,
      },
      {
        field: "is_completed",
        title: "是否分配周期内完成",
        width: 160,
        slots: {
          default: ({ row }) => {
            return <div>{row.is_completed ? "是" : "否"}</div>;
          },
        },
      },
      {
        field: "is_exceed_task_text",
        title: "是否超额任务",
        width: 120,
      },
      {
        title: "操作",
        width: "180",
        fixed: "right",
        slots: {
          default: ({ row }) => {
            return (
              <div class="table-option">
                <div>
                  <el-button type="primary" link onClick={() => handleScore(row, 3)}>
                    评分
                  </el-button>
                  <el-button type="primary" link onClick={() => handleLog(row.id)}>
                    日志
                  </el-button>
                  <VButton
                    auth="/goods/task/picture/edit-performance"
                    type="primary"
                    link
                    onClick={() => handlePerformance(row.id)}
                  >
                    绩效编辑
                  </VButton>
                </div>
              </div>
            );
          },
        },
      },
    ];
  }
};

const handleChangeMode = () => {
  form.value = tableRef.value.getForm();
  const columns = initColumn(activeDepartment.value);
  tableRef?.value?.$table.loadColumn(columns);
  tableRef?.value?.$table.reloadData([]);
  tableRef?.value.query();
};

// 获取枚举类
const fetchOption = async () => {
  getOptions({
    version: "v1",
    name: [
      "report.ReportModeConfig",
      "assignment.ImagesAssignment",
      "assignment.ImagesTag",
      "assignment.ImagesAssignment",
    ],
  }).then((res) => {
    options.value = res.data;
  });
};
fetchOption();

provide("options", options);

const logRef = ref();
const handleLog = (id) => {
  logRef.value.open(id);
};

const ComModalRef = ref();
const handleModal = (type) => {
  ComModalRef.value.open(type);
};

const labelModalRef = ref();
const handleScore = (row, coefficient) => {
  labelModalRef.value.open("score", row, coefficient);
};

const handleLabel = (row, coefficient) => {
  labelModalRef.value.open("view", row, coefficient);
};

const DerivedCenterRef = ref();
const handleExport = () => {
  let condition = tableRef.value.getQueryForm();
  condition.mode = activeDepartment.value;
  DerivedCenterRef.value.open({
    tag_name: "score_list",
    condition,
  });
};

const queryForm = () => {
  nextTick(() => {
    tableRef.value.query();
  });
};

// 任务查看
const refAddTask = ref();
const addRoutineTaskRef = ref();
const handleTask = (row) => {
  nextTick(() => {
    if (row.images_task_type == 2) {
      addRoutineTaskRef?.value.open("view", row.id);
    } else {
      refAddTask?.value.open("view", row.id);
    }
  });
};

// 图片查看
const refCheckImage = ref();
const handleImageView = (row) => {
  nextTick(() => {
    refCheckImage?.value.open(row.id);
  });
};

// 绩效编辑
const editPerformanceRef = ref();
const handlePerformance = (id) => {
  editPerformanceRef.value.open(id);
};

onMounted(() => {
  department_list.value = departmentList.filter((i) => {
    if ((window.BTN_AUTH || []).includes(i.auth) || !i.auth) {
      return i;
    }
  });
  activeDepartment.value = department_list.value[0]?.name;
  handleChangeMode();
});
</script>
<style scoped>
:deep(.el-tabs__nav-wrap::after) {
  height: 1px;
}

:deep(.vxe-toolbar) {
  padding-top: 10px;
}

:deep(.vx-table__form-content) {
  padding-left: 0;
  padding-right: 0;
}

:deep(.vx-table__content) {
  padding: 0;
}
</style>
